<template>
  <div class="payCar">
    <van-nav-bar title="预支付金额">
      <template #left>
        <span
          style="font-size: 30px; background-color: #06c68a; padding: 4px 0"
          @click="$router.go(-1)"
          class="tc ting-fanhui"
          >返回
        </span>
      </template>
    </van-nav-bar>
    <div class="payCar-content">
      <van-field
        readonly
        v-model="params.payMoney"
        placeholder="请输入预支付金额"
      />
    </div>
    <van-number-keyboard
      :show="showKey"
      v-model="params.payMoney"
      theme="custom"
      extra-key="."
      close-button-text="完成"
      @close="onBlur"
      @delete="onDelete"
    />

    <van-dialog
      confirm-button-color="#06C68A"
      v-model="show"
      @confirm="confirm"
      @cancel="show = false"
      title="选择支付方式"
      show-cancel-button
    >
      <div class="dialogList">
        <div
          @click.stop="payType = 1"
          class="dialogList-item"
          :class="{ 'dialogList-item-bg': payType === 1 }"
        >
          <div>
            <van-icon style="margin-right: 10px" name="cash-back-record" />
            现金支付
          </div>
        </div>
        <div
          @click.stop="payType = 2"
          class="dialogList-item"
          :class="{ 'dialogList-item-bg': payType === 2 }"
        >
          <div>
            <van-icon style="margin-right: 10px" name="qr" />
            二维码支付
          </div>
        </div>
      </div>
    </van-dialog>
    <van-dialog
      confirm-button-color="#06C68A"
      v-model="showQr"
      @confirm="confirmQr"
      @cancel="qrCancel"
      title="支付二维码"
      confirmButtonText="已支付"
      :show-confirm-button="!!qrData.payTicketQrCode"
      show-cancel-button
    >
      <div
        class="dialogList"
        style="display: flex; justify-content: center; align-items: center"
      >
        <img
          v-if="qrData.payTicketQrCode"
          :src="qrData.payTicketQrCode"
          style="width: 80%"
          alt=""
        />
        <div v-else>请管理员配置收费二维码</div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { GetPosConfig } from "@/api/modules/home";
import { getPresentDetail, appOrder, paySuccess } from "@/api/modules/order";
import { Toast } from "vant";

export default {
  name: "payCar",
  computed: {
    userInfo() {
      return this.$store.getters.userInfoGetter;
    },
  },
  data() {
    return {
      type: this.$route.query.type,
      showKey: true,
      show: false,
      payType: 1,
      showQr: false,
      qrData: {},
      parkingRecordId: this.$route.query.id,
      params: {
        payMoney: "",
        freeMoney: 0,
        orderType: 2,
        totalMoney: "",
        parkingRecordId: this.$route.query.id,
      },
      loadData: {},
      inTicketConfig: {},
    };
  },
  mounted() {
    this.getInitFn();
  },
  methods: {
    async getInitFn() {
      const { code, data } = await getPresentDetail({
        parkingRecordId: this.$route.query.id,
        tollmanId: this.userInfo.id,
      });
      if (code === 200) {
        this.loadData = data;
        this.getGetPosConfig();
      }
    },
    onBlur() {
      if (this.params.payMoney === "") {
        Toast("请输入预支付金额");
        return;
      }
      if (this.show) return;
      this.show = true;
    },
    qrCancel() {
      this.show = true;
      this.showQr = false;
    },
    onDelete(row) {},
    async confirmQr() {
      let form = { ...this.params };
      form.totalMoney = form.payMoney * 100;
      form.payMoney = form.payMoney * 100;
      const { code, data } = await appOrder({
        details: [form],
        parkCode: this.loadData.parkCode,
        carNo: this.loadData.carNo,
        roadCode: this.loadData.roadCode,
        parkingRecordId: this.parkingRecordId,
        payType: 1,
        payChannel: 2,
        tollmanId: this.userInfo.id,
      });
      if (code === 200 && data) {
        Toast("支付成功");
        this.paySuccessFn(data, "pay");
      }
    },
    async getGetPosConfig() {
      const { code, data } = await GetPosConfig({});
      if (code === 200) {
        this.qrData = data;
        this.inTicketConfig = {
          ...JSON.parse(data.inTicketConfig),
          payTicketQrCode: data.payTicketQrCode,
        };
      }
    },
    async confirm() {
      if (this.payType === 1) {
        let form = { ...this.params };
        form.totalMoney = form.payMoney * 100;
        form.payMoney = form.payMoney * 100;
        const { code, data } = await appOrder({
          details: [form],
          parkCode: this.loadData.parkCode,
          carNo: this.loadData.carNo,
          roadCode: this.loadData.roadCode,
          parkingRecordId: this.parkingRecordId,
          payType: 0,
          payChannel: 1,
          tollmanId: this.userInfo.id || "1647546075499859970",
        });
        if (code === 200 && data) {
          Toast("支付成功");
          this.paySuccessFn(data);
        }
      } else {
        this.showQr = true;
        this.getGetPosConfig();
      }
    },
    async paySuccessFn(row) {
      const { code, data } = await paySuccess({
        orderNo: row.orderNo,
        payTime: this.$utils.filterTimeFn(new Date().getTime()),
      });
      if (code === 200) {
        let params = {};
        params.title = this.inTicketConfig.title;
        params.message = this.inTicketConfig.message;
        if (this.inTicketConfig.isTollman) {
          params["收费员"] = this.userInfo.tollmanName;
        }

        if (this.inTicketConfig.isParkCode) {
          params["停车路段"] = this.loadData.parkName;
        }

        params["泊车号"] = this.loadData.parkspaceCode;
        if (this.inTicketConfig.isCarNum) {
          params["车牌号"] = this.loadData.carNo || "无牌车";
        }
        if (this.inTicketConfig.isCarType) {
          params["车辆类型"] = this.$utils.filterOpt(
            this.loadData.carType,
            "carType"
          );
        }

        if (this.inTicketConfig.isInTime) {
          params["入车时间"] = this.loadData.sysTime;
        }

        params["预支付金额"] = this.params.payMoney;

        params.payTicketQrCode = this.inTicketConfig.payTicketQrCode;
        try {
          const str = JSON.stringify(params);
          // eslint-disable-next-line no-undef
          window.android.printTicket(str);
        } catch (e) {
          console.log(e);
        }
        if (this.type === "details") {
          this.$router.go(-1);
        } else {
          this.$router.push("/home");
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.payCar {
  width: 100%;
  height: 100vh;

  .payCar-content {
    padding: 20px 16px;
    box-sizing: border-box;
  }

  .dialogList {
    padding: 20px 0;

    .dialogList-item {
      width: 80%;
      margin: 0 auto;
      margin-bottom: 20px;
      background-color: #d8d8d8;
      padding: 10px 20px;
      box-sizing: border-box;
      border-radius: 6px;
      font-weight: bold;

      .van-icon {
        color: #999999;
      }
    }

    .dialogList-item-bg {
      background-color: var(--theme-color);
      color: white;

      .van-icon {
        color: white;
      }
    }
  }
}
</style>
